<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compation" content="IE=edge">
    <title>线段变化动画效果</title>
    <style>
        hr {
            border: 2px cornflowerblue solid;
            width: 100px;
            transition: all 0.2s ease-in;
        }

        hr:hover {
            width: 300px;
        }

    </style>
</head>

<body>
    <h3>线段动画效果</h3>
    <hr>
</body>

</html>
